<template>
    <div>
        滴答滴滴答滴
        <button @click.stop = "clickbtn()">
                点我呀
        </button>
        <div id = "echarts-chord-chart" style = "width:100%;height:300px"></div>
    </div>
</template>
<script>
  export default{
    data: function () {
        return{
        }
    },
    methods:{
      postfun(){
        this.$ajax.post("http://localhost:8080/mes/sysDictionary/selectTree",{})
          .then(
            (response)=>{
              console.log(response.request.response);
              console.log(JSON.parse(response.request.response))
            },
            (error)=>{
              console.log(error);
            }
          );
      },
      clickbtn(){
        console.log("点击button")
      },
      echartfun(){
        var dom = document.getElementById("echarts-chord-chart");
        var myChart = $echarts.init(dom);
        var option = {}
        option = {
          backgroundColor: '#1b1b1b',
          tooltip : {
            formatter: "{a} <br/>{c} {b}"
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          series : [
            {
              name:'速度',
              type:'gauge',
              min:0,
              max:220,
              splitNumber:11,
              radius: '50%',
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                  width: 3,
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              axisTick: {            // 坐标轴小标记
                length :15,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              splitLine: {           // 分隔线
                length :25,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  width:3,
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
              },
              title : {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontSize: 20,
                  fontStyle: 'italic',
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              detail : {
                backgroundColor: 'rgba(30,144,255,0.8)',
                borderWidth: 1,
                borderColor: '#fff',
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
                offsetCenter: [0, '50%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  color: '#fff'
                }
              },
              data:[{value: 40, name: 'km/h'}]
            },
            {
              name:'转速',
              type:'gauge',
              center : ['25%', '55%'],    // 默认全局居中
              radius : '30%',
              min:0,
              max:7,
              endAngle:45,
              splitNumber:7,
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
                  width: 2,
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              axisTick: {            // 坐标轴小标记
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              splitLine: {           // 分隔线
                length :20,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  width:3,
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              pointer: {
                width:5,
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
              },
              title : {
                offsetCenter: [0, '-30%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  fontStyle: 'italic',
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              detail : {
                //backgroundColor: 'rgba(30,144,255,0.8)',
                // borderWidth: 1,
                borderColor: '#fff',
                shadowColor : '#fff', //默认透明
                shadowBlur: 5,
                width: 80,
                height:30,
                offsetCenter: [25, '20%'],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 'bolder',
                  color: '#fff'
                }
              },
              data:[{value: 1.5, name: 'x1000 r/min'}]
            },
            {
              name:'油表',
              type:'gauge',
              center : ['75%', '50%'],    // 默认全局居中
              radius : '30%',
              min:0,
              max:2,
              startAngle:135,
              endAngle:45,
              splitNumber:2,
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
                  width: 2,
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              axisTick: {            // 坐标轴小标记
                length :12,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: 'auto',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              axisLabel: {
                textStyle: {       // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                },
                formatter:function(v){
                  switch (v + '') {
                    case '0' : return 'E';
                    case '1' : return 'Gas';
                    case '2' : return 'F';
                  }
                }
              },
              splitLine: {           // 分隔线
                length :15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  width:3,
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              pointer: {
                width:2,
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
              },
              title : {
                show: false
              },
              detail : {
                show: false
              },
              data:[{value: 0.5, name: 'gas'}]
            },
            {
              name:'水表',
              type:'gauge',
              center : ['75%', '50%'],    // 默认全局居中
              radius : '30%',
              min:0,
              max:2,
              startAngle:315,
              endAngle:225,
              splitNumber:2,
              axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
                  width: 2,
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              axisTick: {            // 坐标轴小标记
                show: false
              },
              axisLabel: {
                textStyle: {       // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                },
                formatter:function(v){
                  switch (v + '') {
                    case '0' : return 'H';
                    case '1' : return 'Water';
                    case '2' : return 'C';
                  }
                }
              },
              splitLine: {           // 分隔线
                length :15,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                  width:3,
                  color: '#fff',
                  shadowColor : '#fff', //默认透明
                  shadowBlur: 10
                }
              },
              pointer: {
                width:2,
                shadowColor : '#fff', //默认透明
                shadowBlur: 5
              },
              title : {
                show: false
              },
              detail : {
                show: false
              },
              data:[{value: 0.5, name: 'gas'}]
            }
          ]
        };

        setInterval(function (){
          option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
          option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
          option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
          option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
          myChart.setOption(option);
        },2000)
      }
    },
    mounted:function(){
      this.postfun();
      this.echartfun();
    }
  }
</script>
